<template>
	<view class="content">
		<image src="../../static/images/public/mytopbj.png" mode="" class="topbjimg"></image>
		<view class="title"
			:style="'height:' +header.height +'px;' +'padding-top:' + header.top +'px;padding-bottom:6rpx' ">
			<image @click="retu_back" src="../../static/images/public/back_white.png" mode=""></image>
			<view class="title-text">我的资料</view>
			<view class="title-text-right"></view>
		</view>
		<view class="toppos">
			<image src="../../static/images/public/mytoptitle.png" mode="" class="topbjimg1"></image>
			<image src="../../static/images/public/mytoptx.png" mode="" class="topbjimg2"></image>
			<view class="head-list">
				<view class="head-list-box" v-if="userList">
					<image :src="item.avatar" mode="aspectFill" v-for="(item, index) in userList" :key="index"></image>
				</view>
			</view>
			<image v-if="form.avatar!==''" class="topbjimg3" :src="form.avatar" mode="aspectFill"
				@tap="chooseAvatar"></image>
			<image v-else src="../../static/images/public/txfile.png" class="topbjimg3" mode="aspectFill"
				@tap="chooseAvatar"></image>
		</view>
		<view class="white-bg datum-box" :style="'padding-top:275px;'">

			<!-- <view class="mytitle">基本信息</view>
			<view class="inner">	
				<view class="information-line">
					<view class="information-line-label">
						实名认证
						<text class="main-hint">重点</text>
					</view>
					<view class="information-line-link">
				
						<navigator url="/pageA/realName/realName" v-if="userInfo.certificate_status == -1">未实名
						</navigator>
						<navigator url="/pageA/realName/realName" v-else-if="userInfo.certificate_status == 0">待认证
						</navigator>
						<view v-else-if="userInfo.certificate_status == 1" @click="clickTongGuo()">认证通过</view>
						<navigator url="/pageA/realName/realName" v-else-if="userInfo.certificate_status == 2">认证拒绝
						</navigator>
					</view>
				</view>
				
				<view class="information-line">
					<view class="information-line-label">
						定制恋人
						<text class="main-hint">重点</text>
					</view>
					<view class="information-line-link">
						<navigator url="/pageA/my-profile/dingzhi">去定制</navigator>
					</view>
				</view>
			</view> -->


			<!-- <view class="line"></view> -->
			<view class="inner">
				<view class="my-profile-box">
					<u-form :model="form" ref="uForm" :rules="rules">
						<view class="my-profile-box-title">基本信息</view>
						<view class="information-line">
							<view class="information-line-label">昵称</view>
							<view class="information-line">
								<u-form-item prop="nick_name">
									<u-input v-model="form.nick_name" class="text-right" :clearable="false"
										placeholder="请输入" placeholder-style="color:#8389a0" />
								</u-form-item>
							</view>
						</view>
						<view class="information-line">
							<view class="information-line-label">性别</view>
							<view class="">
									<view @click="onClicksex('F')"
										:class="form.sex == 'F' ? 'selectSex' : 'hovsex'">男</view>
									<view @click="onClicksex('M')"
											:class="form.sex == 'M' ? 'selectSex' : 'hovsex'">女</view>

							</view>

						</view>

						<view class="information-line" @click="selectShow('height')">
							<view class="information-line-label">身高</view>
							<view class="information-line-link">
								{{ form.height ? form.height + "cm" : "请选择" }}
							</view>
						</view>
						<!--  @click="selectShow('marital_status')" -->
						<view class="information-line">
							<view class="information-line-label">婚姻状况</view>
							<view class="">
								<!-- hunchoose 选中样式 -->
			<view :class="form.marital_status == '未婚' ? 'selecthun' : 'hovhun'"
			@click="onClickhun('未婚')">未婚</view>
			<view :class="form.marital_status == '离异' ? 'selecthun' : 'hovhun'"
			@click="onClickhun('离异')">离异</view>
			<view :class="form.marital_status == '丧偶' ? 'selecthun' : 'hovhun'"
			@click="onClickhun('丧偶')">丧偶</view>
			<view :class="form.marital_status == '已婚' ? 'selecthun' : 'hovhun'"
			@click="onClickhun('已婚')">已婚</view>
							</view>
						</view>
						<view class="information-line" @click="selectDatePicker('date')">
							<view class="information-line-label">出生日期</view>
							<view class="information-line-link">{{
                form.birthday ? form.birthday : "请选择"
              }}</view>
						</view>
						<view class="information-line" @click="selectShow('education')">
							<view class="information-line-label">学历</view>
							<view class="information-line-link">
								<template>
									<view class="information-show">{{
                    form.education == "" ? "请选择" : form.education
                  }}</view>
								</template>
							</view>
						</view>
						<view class="information-line">
							<view class="information-line-label">毕业院校</view>
							<view class="information-line-link">
								<u-input v-model="form.graduation_school" class="text-right" :clearable="false"
									placeholder="请选择" placeholder-style="color:#8389a0" />
							</view>
						</view>
						<view class="line"></view>
						<view class="information-line" @click="addressShowEvent('work_place')">
							<view class="information-line-label">工作地</view>
							<view class="information-line-link">
								<template>
									<view class="information-show">{{
                    form.work_place == "" ? "请选择" : form.work_place
                  }}</view>
								</template>
							</view>
						</view>
						<view class="information-line" @click="addressShowEvent('province')">
							<view class="information-line-label">家乡</view>
							<view class="information-line-link">
								<template v-if="form.province != ''">
									<view class="information-show">{{ form.province }}</view>
								</template>
								<template v-else>
									<input type="text" disabled value="" placeholder="请选择" />
								</template>
							</view>
						</view>
						<view class="information-line" @click="selectShow('salary1')">
							<view class="information-line-label">月收入</view>
							<view class="information-line-link">{{
                form.salary1 == "" ? "请选择" : form.salary1
              }}</view>
						</view>
						<view class="information-line" @click="jobSelectShow = true">
							<view class="information-line-label">职业</view>
							<view class="information-line-link">
								<u-form-item prop="job">
									<u-input v-model="form.job" class="text-right" :clearable="false" placeholder="请选择"
										placeholder-style="color:#8389a0" />
								</u-form-item>
							</view>
						</view>
						<view class="information-line" @click="selectShow('work_type')">
							<view class="information-line-label">单位性质</view>
							<view class="information-line-link">
								<template>
									<view class="information-show">{{
                    form.work_type == "" ? "请选择" : form.work_type
                  }}</view>
								</template>
							</view>
						</view>
						<view class="information-line" @click="selectShow('housing')">
							<view class="information-line-label">住房</view>
							<view class="information-line-link">
								<template>
									<view class="information-show">{{
                    form.housing == "" ? "请选择" : form.housing
                  }}</view>
								</template>
							</view>
						</view>
						<personal-label ref="myPersonalLabel" />
						<mineSelect :selectType.sync="selectType" ref="mineSelect" @closeValue="closeValue"
							@chooseValue="chooseValue"></mineSelect>
						<view class="fixation"><button form-type="submit" @click="onSubmit" class="submitBtn">提交</button></view>

						<u-select v-model="jobSelectShow" mode="mutil-column-auto" :list="JobList" title="123"
							@confirm="confirmSelect"></u-select>

						<view class="mt20">
							<view class="imgtitle">宣传图片
								<text>（好看的照片，更容易被推荐哦～）</text>
							</view>
							<imgUpload :count="count" @obtain_img="obtain_img" :name="name" :header="header" :url="url">
							</imgUpload>
						</view>
					</u-form>
				</view>
			</view>
			<u-picker mode="region" v-model="addressShow" :params="params" @confirm="provinceEvent"></u-picker>
			<u-calendar v-model="birthdayShow" :mode="mode" @change="confirmBirthday"></u-calendar>
			<u-toast ref="uToast" />
			<!-- 注意事项弹窗 -->
			<u-modal v-model="show" title="注意事项" :show-confirm-button="false" :title-style="{ color: '#474a58' }"
				:mask-close-able="true">
				<view class="hint-message">
					<text class="hint-message">
						本平台为高端婚恋交友平台， 需要实名认证，后台运营会认真审核的哦!
						请真实填写您的资料，并确保目前单身状态，否则，一经举报，将被列入诚信黑名单，会员费不予退还。
					</text>
					<view class="hint-sign">
						<checkbox-group @change="consentChange">
							<checkbox :checked="isConsent" style="transform: scale(0.7)" value="同意" />
							同意并签署《单身交友说明》
						</checkbox-group>
					</view>
					<view :class="['hint-btn', 'global-button', { isDisabled: !isConsent }]" @click="consentEvent">我已知晓
					</view>
				</view>
			</u-modal>
			<date-time-picker ref="date-time" :indicatorStyle="indicatorStyle" :type="type" :datestring="dateString"
				@change="dateTimeChange"></date-time-picker>
		</view>
	</view>
</template>

<script>
	import mineSelect from "@/pageA/mine-select/mine-select";
	import PersonalLabel from "@/pageA/individuality/individualitys.vue";
	import {
		completeInformation,
		recentAuthUsers,
		getCareerList,
		loadAuthInfo,
	} from "@/api/user/user";
	import {
		getUserInfo
	} from "@/util/getInfo.js";
	import request from "@/util/request/request.js";
	import DateTimePicker from "@/pageA/bory-dateTimePicker/bory-dateTimePicker.vue";
	import imgUpload from "@/pageA/components/img-upload/img-uploads.vue";
	import { EventBus } from "@/util/event-bus.js";
	
	export default {
		components: {
			mineSelect,
			DateTimePicker,
			PersonalLabel,
			imgUpload
		},
		data() {
			return {
				count: 9,
				name: "file", //必填
				url: "https://api.kuaimayoupin.com/huipaysns/mitang/user/upload", //必填
				didCustomize: false,
				isContent: "您的个人资料已经修改，退出前要保存吗?",
				header: {
					top: 0,
					height: 0,
					allHeight: 0,
				},
				isConsent: true,
				action: request.config.baseUrl + "user/upload",
				uploadHeader: {
					token: "",
				},
				params: {
					province: true,
					city: true,
					area: false,
				},
				addressShow: false,
				maxPicNum: 1,
				isHint: true,
				show: true,
				JobList: [],
				jobSelectShow: false,
				birthdayShow: false,
				form: {
					avatar: "",
					nick_name: "",
					height: "",
					marital_status: "",
					constellation: "",
					education: "",
					graduation_school: "",
					work_place: "",
					salary1: "",
					job: "",
					work_type: "",
					housing: "",
					province: "", //籍贯
					age: "",
					soliloquy: "",
					birthday: "",
					sex: "",
				},
				selectType: "",
				mode: "date",
				rules: {
					nick_name: [{
							required: true,
							message: "请输入昵称!",
							trigger: ["change", "blur"],
						},
						{
							max: 8,
							min: 1,
							message: "昵称在1-8字之间",
							trigger: ["change", "blur"],
						},
					],
				},
				addressType: "",
				userList: [],
				loadAuthInfo: {},
				title: "",
				isSave: false,
				content: "您的个人资料已经修改，退出前要保存吗?",
				type: "",
				index: null,
				userInfo: {}
			};
		},
		created() {
			const header = uni.getMenuButtonBoundingClientRect();
			this.header.top = header.top;
			this.header.height = header.height;
			this.header.allHeight = header.top + header.height + 6;
			loadAuthInfo().then((res) => {
				Object.assign(this.loadAuthInfo, res.data);
			});
			this.userInfo = uni.getStorageSync("userInfo");
			getApp().globalData.userInfo = this.userInfo;

			uni.$on("uAvatarCropper", (path) => {
				this.avatar = path;
				// 可以在此上传到服务端
				uni.uploadFile({
					url: this.action,
					filePath: path,
					name: "file",
					complete: (res) => {
						console.log(JSON.parse(res.data));
						this.form.avatar = JSON.parse(res.data).data[0].url;
					},
				});
			});
			uni.getStorage({
				key: "userInfo",
				success: (res) => {
					this.form = Object.assign({}, this.form, res.data);
					this.form.salary1 = this.form.salary;
					this.show = !this.form.certificated;
					console.log(this.form, "==");
				},
			});
			getCareerList().then((res) => {
				this.JobList = this.deleteNull(res.data, "children");
			});
			recentAuthUsers().then((res) => {
				this.userList = res.data;
			});
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			getUserInfo();
			uni.getStorage({
				key: "userInfo",
				success: (res) => {
					this.userInfo = Object.assign({}, res.data);
					this.didCustomize = this.userInfo.customized === true;
					console.log("0-0-0-");
					console.log(this.didCustomize);
					getApp().globalData.userInfo = this.userInfo;
				},
			});

		},
		filters: {
			sexLabel(sex) {
				if (sex === "男") return sex;
				if (sex === "女") return sex;
				return sex === "M" ? "男" : "女";
			},
		},
		methods: {
			
			
			obtain_img(data) {
				this.talkTipsImages = data;
				console.log(data, "获取到的图片组" + data.length + "张");
			},

			selectDatePicker(type) {
				this.type = type;
				this.$refs["date-time"].show();
			},
			dateTimeChange(value) {
				this.form.birthday = value;
			},
			cancelEvent() {
				uni.navigateBack();
			},
			confirmSave() {
				// this.isSave = false;
				this.onSubmit();
			},
			retu_back() {
				var that = this;
				uni.showModal({
					title: "提示",
					content: "您的个人资料已经修改，退出前要保存吗?",
					success: function(res) {
						if (res.confirm) {
							that.confirmSave();
						} else if (res.cancel) {
							uni.navigateBack();
							console.log("用户点击取消");
						}
					},
				});
				// this.isSave = true;
			},
			chooseAvatar() {
				this.$u.route({
					url: "/uview-ui/components/u-avatar-cropper/u-avatar-cropper",
					params: {
						destWidth: 300,
						rectWidth: 200,
						fileType: "jpg",
					},
				});
			},
			deleteNull(list, name) {
				list.map((item, index) => {
					if (item[name].length == 0) {
						delete item[name];
					} else {
						this.deleteNull(item[name], name);
					}
				});
				return list;
			},
			confirmSelect(e) {
				this.$set(this.form, "job", e[1].label);
				this.jobSelectShow = false;
			},
			consentChange() {
				this.isConsent = !this.isConsent;
			},
			consentEvent() {
				this.show = false;
				// if (this.isConsent) {
				// 	uni.setStorage({
				// 		key: 'isConsent',
				// 		data: 'true',
				// 		success: () => {
				// 			this.show = false;
				// 		}
				// 	});
				// }
			},
			uploadAvater(data) {
				this.form.avatar = data.data[0].url;
			},

			provinceEvent(e) {
				if (e.city) {
					this.form[this.addressType] = e.province.label + e.city.label;
				} else {
					this.form[this.addressType] = e.province.label;
				}
			},
			addressShowEvent(value) {
				this.addressShow = true;
				this.addressType = value;
				switch (value) {
					case "province":
						this.title = "籍贯";
						break;
					case "work_place":
						this.title = "工作地";
						break;
				}
			},
			confirmBirthday(e) {
				this.form.birthday = e.result;
			},
			birthdayEvent() {
				this.birthdayShow = true;
			},
			onInput(e) {
				this.$emit("input", e.detail.value);
			},
			onSubmit(e) {
				if (this.form.nick_name == "") {
					uni.showToast({
						title: "请输入昵称",
						icon: "none",
					});
					return;
				} else if (!this.form.height) {
					uni.showToast({
						title: "请选择身高",
						icon: "none",
					});
					return;
				} else if (this.form.province == "-1") {
					uni.showToast({
						title: "请选择籍贯",
						icon: "none",
					});
					return;
				} else if (this.form.marital_status == "") {
					uni.showToast({
						title: "请选择婚姻状况",
						icon: "none",
					});
					return;
				} else if (!this.form.birthday) {
					uni.showToast({
						title: "请选择出生日期",
						icon: "none",
					});
					return;
				} else if (this.form.education == "") {
					uni.showToast({
						title: "请选择学历",
						icon: "none",
					});
					return;
				} else if (this.form.graduation_school == "") {
					uni.showToast({
						title: "请输入毕业院校",
						icon: "none",
					});
					return;
				} else if (this.form.work_place == "") {
					uni.showToast({
						title: "请选择工作地",
						icon: "none",
					});
					return;
				} else if (this.form.salary1 == "") {
					uni.showToast({
						title: "请选择月收入",
						icon: "none",
					});
					return;
				} else if (this.form.job == "") {
					uni.showToast({
						title: "请选择职业",
						icon: "none",
					});
					return;
				} else if (this.form.work_type == "") {
					uni.showToast({
						title: "请选择单位性质",
						icon: "none",
					});
					return;
				} else if (this.form.housing == "") {
					uni.showToast({
						title: "请选择住房",
						icon: "none",
					});
					return;
				}

				this.$refs.myPersonalLabel.save();
				// 暂时未做验证
				this.$refs.uForm.validate((valid) => {
					if (valid) {
						if (this.form.sex) {
							if (this.form.sex === "男") {
								this.form.sex = "M";
							} else if (this.form.sex === '女') {
								this.form.sex = "F";
							}
						}
						this.form.salary = this.form.salary1;
						console.log(this.form)
						completeInformation(this.form).then((res) => {
							// uni.setStorageSync('userInfo', this.form);
							if (res.status == 1) {
								this.completeInformationSuccess(res.message)
							}
						});
					} else {
						console.log("验证失败");
					}
				});
			},
			selectShow(name) {
				this.selectType = name;
			},
			chooseValue(type, e) {
				this.form[type] = e[0].label;
				this.selectType = "";
				console.log("e: ", e);
			},
			onClicksex(name){
				// console.log(name)	
				if(name == 'F'){
					this.form.sex = 'F'
				}else{
					 this.form.sex = 'M'
				}
			},
			onClickhun(name){
				 if(name == '未婚'){
				 		this.form.marital_status = '未婚'
				 }else if(name == '离异'){
				 		this.form.marital_status = '离异'
				 }else if(name == '丧偶'){
						this.form.marital_status = '丧偶'
				 }else if(name == '已婚'){
						this.form.marital_status = '已婚'
				 }
			},
			// closeCom(type, e) {
			// 	this.form[type] = e[0].label;
			// 	this.selectType = '';
			// },
			closeValue() {
				this.selectType = "";
			},
			completeInformationSuccess(message){
				EventBus.$emit("didComplete", true);
				this.$refs.uToast.show({
					title: message,
					type: "success",
				});
				getUserInfo().then((res) => {
					 console.log("success--and--------", res);
					var userInfo = getApp().globalData.userInfo || {}
					var customized = userInfo.customized || false;
					console.log("success--customized--------", customized);
					if (customized == false) {
						console.log("没有定制去定制");
						// 没有定制去定制
						uni.redirectTo({ url: "/pageA/my-profile/dingzhi?once=once" });
					} else {
						// 认证
						var certificated = userInfo.certificated || false;
						if (certificated == false){
							// 没有认证去认证
							uni.redirectTo({ url: "/pageA/realName/realName?once=once" });
						} else {
							// 返回
							uni.reLaunch({
							  url:"/pages/home2/home"
							});
						}
					}
					
				});
			}
		},
	};
</script>

<style lang="scss">
	.global-button{
		background: linear-gradient(135deg, #ff5e6a 0%, #ff5e6a 100%);
		border-radius: 50rpx;

	}
	.mt20 {
		margin-top: 20rpx;
	}

	.datum-box {
		padding-bottom: 200upx;
	}

	.my-profile-pic {
		image {
			width: 100%;
			height: 190upx;
		}
	}

	.head-list {
		.head-list-title {
			font-weight: 400;
			color: rgba(131, 137, 160, 1);
			font-size: 28upx;
			line-height: 36upx;
		}

		.head-list-box {
			display: flex;
			justify-content: center;

			image {
				display: block;
				width: 48upx;
				height: 48upx;
				border: 1px solid #fff;
				border-radius: 50%;
				overflow: hidden;
				margin-left: -20upx;
			}

			image:nth-child(1) {
				margin-left: 0;
				z-index: 5;
			}

			image:nth-child(2) {
				z-index: 4;
			}

			image:nth-child(3) {
				z-index: 3;
			}

			image:nth-child(4) {
				z-index: 2;
			}

			image:nth-child(5) {
				z-index: 1;
			}
		}
	}

	.information-line {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 120upx;

		.information-line-label {
			font-weight: 400;
			color: #333333;
			line-height: 42upx;
			font-size: 32upx;

			.main-hint {
				background: rgba(255, 255, 255, 1);
				border-radius: 2px;
				border: 1px solid rgba(255, 170, 55, 1);
				font-size: 24upx;
				color: #ffaa37;
				padding: 0 10upx;
				margin-left: 20upx;
			}
		}

		.information-line-link {
			padding-right: 46upx;
			font-weight: 400;
			// color: rgba(131, 137, 160, 1);
			line-height: 42upx;
			font-size: 30upx;
			text-align: right;
			background: url("http://static.kuaimayoupin.com/8685799190963879.png") no-repeat right center;
			background-size: 40upx;
			color: #5760B4;

			image {
				display: block;
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
			}

			.text-right view {
				text-align: right !important;
				font-size: 28upx;
			}

			.u-list-item {
				width: 90upx !important;
				height: 90upx !important;
				border: none !important;
				border-radius: 50%;
			}

			input {
				color: rgba(131, 137, 160, 1);
			}
		}
	}

	.information-line-soliloquy {
		padding: 20upx 0;
		border-bottom: 1px solid #dfe1ec;
	}

	.my-profile-box {
		.my-profile-box-title {
			font-size: 36upx;
			font-weight: 500;
			color: #333333;
			line-height: 48upx;
			margin: 20upx 0;
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx
		}

		.information-line {
			border-bottom: 1px solid rgba(153, 153, 153, 0.05);
			box-sizing: border-box;
			padding: 0 30rpx
		}
	}

	.fixation {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 30upx;
		box-sizing: border-box;
		width: 100%;
		height: 140upx;
		z-index: 99;
	}

	.submitBtn {
		width: 100%;
		line-height: 96upx;
		background: linear-gradient(135deg,
				rgba(255, 94, 106, 1) 0%,
				rgba(255, 94, 106, 1) 100%);
		border-radius: 50rpx;
		text-align: center;
		font-size: 32upx;
		font-weight: 600;
		color: rgba(255, 255, 255, 1);
	}

	.hint-message {
		font-size: 28upx;
		color: rgba(71, 74, 88, 1);
		line-height: 48upx;
		padding: 30upx 72upx 72upx 72upx;
	}

	.hint-sign {
		display: flex;
		justify-items: center;
		align-items: center;
		margin: 40upx 0;
	}

	.hint-btn {
		width: 376upx;
		line-height: 80upx;
	}

	.isDisabled {
		background: #ccc;
	}

	.content {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		width: 100vw;
		height: 100vh;

		.title {
			position: fixed;
			top: 0;
			width: 100%;
			left: 0;
			box-sizing: content-box;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-left: 40rpx;
			margin-right: 40rpx;

			image {
				width: 28rpx;
				height: 28rpx;
			}

			.title-text {
				color: white;
				font-size: 17px;
				text-align: center;
			}

			.title-text-right {
				width: 110rpx;
			}
		}
	}

	.topbjimg {
		width: 100%;
		height: 530rpx;
		position: absolute;
		top: 0;

	}

	.toppos {
		width: 100%;
		margin: 0 auto;
		position: absolute;
		left: 0;
		top: 170rpx;
		text-align: center;
	}

	.topbjimg1 {
		width: 70%;
		height: 46rpx;

	}

	.topbjimg2 {
		width: 236rpx;
		height: 30rpx;
		margin-top: 32rpx;
		margin-bottom: 10rpx;
	}

	.topbjimg3 {
		width: 180rpx;
		height: 180rpx;
		margin: 34rpx auto 0 auto;
		display: block;
		border-radius: 50%;
	}

	.inner {
		padding: 0 0;
	}

	.imgtitle {
		font-size: 36rpx;
		color: #333333;
		margin-bottom: 24rpx;
		margin-top: 24rpx;
		padding-left: 30rpx;
	}

	.imgtitle text {
		font-size: 28rpx;
		color: #666666;
		padding-left: 6rpx;
	}

	.text-right,
	input[type=text] {
		color: #5760B4 !important;
		font-size: 30rpx;
		text-align: right;
	}

	.hovsex {
		width: 78rpx;
		height: 48rpx;
		background: #F5F5F5;
		border-radius: 8px;
		color: #999999;
		font-size: 15px;
		text-align: center;
		line-height: 48rpx;
		margin-left: 16rpx;
		display: inline-block;
	}

	.selectSex {
		width: 78rpx;
		height: 48rpx;
		background: #5760B4;
		border-radius: 8px;
		color: #FFFFFF;
		font-size: 15px;
		text-align: center;
		line-height: 48rpx;
		margin-left: 16rpx;
		display: inline-block;
	}

	.sexchoose {
		background: #5760B4;
		color: #fff;
	}

	.hovhun {
		width: 108rpx;
		height: 48rpx;
		background: #F5F5F5;
		border-radius: 8px;
		color: #999999;
		font-size: 15px;
		text-align: center;
		line-height: 48rpx;
		margin-left: 16rpx;
		display: inline-block;
	}

	.selecthun {
		width: 108rpx;
		height: 48rpx;
		background: #5760B4;
		border-radius: 8px;
		color: #FFFFFF;
		font-size: 15px;
		text-align: center;
		line-height: 48rpx;
		margin-left: 16rpx;
		display: inline-block;
	}

	.hunchoose {
		background: #5760B4;
		color: #fff;
	}
</style>
